<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title id="pageTitle">AI 模型生成图竞品分析</title>
    <style>
        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }
        th, td {
            border: 1px solid #ddd;
            text-align: center;
            vertical-align: middle;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        /* 图片样式 */
        img {
            max-width: 150px;
            height: auto;
            cursor: pointer;
        }
        /* 模态窗口的样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
        }
        .modal-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90%;
        }
        .close {
            position: absolute;
            top: 20px;
            right: 35px;
            color: #ffffff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        /* 导航栏样式 */
        nav {
            margin-bottom: 20px;
            background-color: #333;
            overflow: hidden;
        }
        nav button {
            background-color: #333;
            color: white;
            padding: 14px 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            display: inline-block;
        }
        nav button:hover {
            background-color: #ddd;
            color: black;
        }
        /* 当前选中主题的样式 */
        nav button.active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav id="theme-nav">
    <!-- 导航栏按钮将由 JavaScript 动态生成 -->
</nav>

<!-- 清理缓存按钮 -->
<div class="theme-switcher">
    <button id="clearCacheBtn" onclick="clearCache()">清理网站缓存</button>
</div>

<h1>AI 模型生成图竞品分析</h1>
<table id="imageTable">
    <!-- 表头和内容将由 JavaScript 动态生成 -->
</table>

<!-- 模态窗口结构 -->
<div id="modal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img class="modal-content" id="modalImg">
</div>

<script>
    // 从 Django 模板中获取初始数据
    const categoriesData = {{ categories_data|safe }};
    let currentTheme = categoriesData[0]; // 默认选中的主题
    let cacheBuster = ''; // 用于清理缓存

    // 初始化页面
    function init() {
        // 动态生成导航栏
        generateNavBar();

        // 初次加载默认主题的数据
        loadData(currentTheme);
    }

    // 生成导航栏的方法
    function generateNavBar() {
        const navBar = document.getElementById('theme-nav');
        navBar.innerHTML = ''; // 清空导航栏内容

        categoriesData.forEach(category => {
            const button = document.createElement('button');
            button.textContent = category.display_name;
            button.dataset.themeId = category.id;

            // 如果是当前选中的主题，添加 active 类
            if (category.id === currentTheme.id) {
                button.classList.add('active');
            }

            // 监听主题按钮的点击事件
            button.addEventListener('click', () => {
                currentTheme = category;

                // 更新导航栏按钮的 active 类
                document.querySelectorAll('#theme-nav button').forEach(btn => {
                    btn.classList.remove('active');
                });
                button.classList.add('active');

                // 动态修改页面标题
                document.getElementById('pageTitle').textContent = category.display_name + " - AI 模型生成图竞品分析";

                // 加载对应主题的数据
                loadData(currentTheme);
            });

            navBar.appendChild(button);
        });
    }

    // 加载数据的方法
    function loadData(theme) {
        // 发送 AJAX 请求获取主题数据
        fetch(`/get_theme_data/?order_col=${theme.order_col}`)
            .then(response => response.json())
            .then(themeData => {
                // 生成图片表格
                generateImageTable(theme, themeData);
            })
            .catch(error => {
                console.error('加载数据时出错:', error);
            });
    }

    // 生成图片表格的方法
    function generateImageTable(theme, themeData) {
        const table = document.getElementById('imageTable');
        table.innerHTML = ''; // 清空表格内容

        if (!themeData || !themeData.columnDisplayNames) {
            return;
        }

        // 动态生成表头
        const thead = document.createElement('thead');
        const headerRow = document.createElement('tr');

        // 序号列
        const seqHeader = document.createElement('th');
        seqHeader.textContent = '序号';
        headerRow.appendChild(seqHeader);

        // 其他列
        themeData.columnDisplayNames.forEach(column => {
            const th = document.createElement('th');
            th.textContent = column.display_name;
            headerRow.appendChild(th);
        });

        thead.appendChild(headerRow);
        table.appendChild(thead);

        // 动态生成表格内容
        const tbody = document.createElement('tbody');

        // 根据 count 生成每一行的数据
        for (let i = 1; i <= theme.count; i++) {
            const row = document.createElement('tr');

            // 序号列
            const seqCell = document.createElement('td');
            seqCell.textContent = i;
            row.appendChild(seqCell);

            // 其他列
            themeData.columnDisplayNames.forEach(column => {
                const cell = document.createElement('td');

                // 生成图片 URL：拼接导航栏的 url 和 column 的 url
                const imgUrl = theme.url + column.url + i + column.file_end;

                // 为图片 URL 添加随机参数，防止缓存
                const imgRandomParam = cacheBuster ? '?v=' + cacheBuster : '';
                const fullImgUrl = imgUrl + imgRandomParam;

                const img = document.createElement('img');
                img.src = fullImgUrl;
                img.alt = `${column.column_key} ${i}`;
                img.addEventListener('click', () => {
                    showModal(fullImgUrl);
                });
                cell.appendChild(img);

                row.appendChild(cell);
            });

            tbody.appendChild(row);
        }

        table.appendChild(tbody);
    }

    // 清理缓存的方法
    function clearCache() {
        // 清除 localStorage
        localStorage.clear();

        // 清除 sessionStorage
        sessionStorage.clear();

        // 清除缓存数据
        if ('caches' in window) {
            caches.keys().then(function(names) {
                for (let name of names)
                    caches.delete(name);
            });
        }

        // 注销 Service Workers
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations().then(function(registrations) {
                for(let registration of registrations) {
                    registration.unregister();
                }
            });
        }

        // 生成一个新的随机参数，用于强制刷新图片
        cacheBuster = Date.now();

        // 重新加载数据，以更新图片的 URL
        loadData(currentTheme);

        alert('网站缓存已清理，页面和图片已重新加载');
    }

    // 显示模态窗口
    function showModal(url) {
        const modal = document.getElementById('modal');
        const modalImg = document.getElementById('modalImg');
        modal.style.display = "block";
        modalImg.src = url;
    }

    // 关闭模态窗口
    function closeModal() {
        const modal = document.getElementById('modal');
        modal.style.display = "none";
    }

    // 初始化页面
    init();
</script>
</body>
</html>